<template>
	<view class="container">
		<!-- <view :style="{height:topHeight+'px'}"> -->
			<view class="header" >
				<navSearchBar title="客户详情" background=""></navSearchBar>
				<view style="height: 200rpx;">
					<view class="content-top">
						<view class="text-top">{{title}}</view>
						<view class="text-middle">
							<text>{{cooperationLevel}}</text>
							<text>{{scaleText}}</text>
						</view>
						<view class="text-bottom">
							<text>{{industryText}}</text>
							<text>{{integrityText}}</text>
						</view>
							
					</view>
				</view>
			</view>
		<!-- </view> -->
		<scroll-view class="body" :style="{height:contentHeight}" scroll-y enable-back-to-top @scrolltolower="scrolltolower">
			<view class="operate-tab">
				<tn-tabs  :list="tabList" :isScroll="false" height="90" :current="current" name="tab-name" :bold="true" activeColor="#3B54DA" inactiveColor="#6F6F6F" @change="changeTab" :barHeight="2" :barWidth="48"></tn-tabs>
			</view>
			<view class="content">
				<baseInfo  v-show="current==0" :clientId="clientId" :model="detailContent" :historyContent="historyContent" moduleType="all"></baseInfo>
				<contactPerson ref="contactRefs" v-show="current==1" :clientId="clientId" moduleType="all"></contactPerson>
				<deMand ref="deMandRefs" v-show="current==2" :clientId="clientId" moduleType="all"></deMand>
				<accessRecord ref="recordRefs" :clientId="clientId" v-show="current==4" moduleType="all"></accessRecord>
				<trace ref="traceRefs" :clientId="clientId" v-show="current==3" moduleType="all"></trace>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import baseInfo from '../component/baseInfo.vue';
	import contactPerson from '../component/contactPerson.vue';
	import deMand from '../component/deMand.vue';
	import accessRecord from '../component/accessRecord.vue'
	import trace from '../component/trace.vue'
	import {rpxToPx} from "@/common/util/util"
	export default {
		components:{
			baseInfo,
			contactPerson,
			deMand,
			accessRecord,
			trace
		},
		data() {
			return {
				 historyContent:{},
				 detailContent:{},
				 cooperationLevel:'',
				 industryText:'',
				 title:'',
				 integrityText:'',
				 scaleText:'',
				 tabList: [{
				  name: '基本信息'
				}, {
				  name: '联系人'
				}, {
				  name: '需求',
				},{
				  name: '跟踪',
				
				},
				{
				  name: '访问记录',
				
				}],
				
				current: 0,
				topHeight:0,
				clientId:'',
				
			}
		},
		computed:{
			contentHeight(){
				return `calc(100vh - ${this.topHeight}px - env(safe-area-inset-bottom))`
			}
		},
		onLoad(){
			const id = this.$Route.query.id;
			this.clientId = id;
			console.log('onload parent')
			this.getDetail(id);
		},
		onReady(){
			const px = Math.floor(rpxToPx(200));
			let height = this.$store.getters.my_custom_navBarHeight;
			this.topHeight = height + px;
		},
		methods: {
			scrolltolower(e){
				console.log('scrollll',e)
				if(this.current == 1) {
					//联系人
					this.$refs.contactRefs.loadMore();
				} else if(this.current == 2){
					//需求
					this.$refs.deMandRefs.loadMore();
				} else if(this.current == 3){
					//追踪
					this.$refs.traceRefs.loadMore();
				} else if(this.current == 4) {
					//记录
					this.$refs.recordRefs.loadMore();
				}
			},
			getDetail(id){
				this.$http.get(`/api/business/client/view/${id}`).then((res) => {
					if(res.data.status == 200) {
						this.industryText = res.data.data.industry_info;
						this.title =  res.data.data.name;
						this.cooperationLevel =  res.data.data.level.text;
						this.scaleText = res.data.data.scale.text;
						this.clientId = res.data.data.id;
						this.integrityText =  res.data.data.integrity_score.text;
						this.detailContent = res.data.data.detail||{};
						this.historyContent = res.data.data.history||{};
						console.log('12344',this.historyContent)
					}
				})
			},
			changeTab(index){
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	font-size: 24rpx;
	.header{
		width: 100%;
		// position: fixed;
		background: linear-gradient( 180deg, #E9ECFF 0%, #FFFFFF 100%);
	}
	
	.content-top{
		width: 100%;
		position: fixed;
		z-index: 1;
		height: 200rpx;
		padding:30rpx 40rpx;
		color: #000000;
		.text-top{
			font-size: 32rpx;
			line-height: 32rpx;
			color: #525252;
			font-weight: $Semibold;
		}
		.text-middle{
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			
			line-height: 24rpx;
		}
		.text-bottom{
			display: flex;
			justify-content: space-between;
			line-height: 24rpx;
			
		}
	}
	.body{
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.10);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		.operate-tab{
			position: fixed;
			height: 90rpx;
			width: 100%;
			border-bottom: 2rpx solid #EFEFEF;
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			/deep/.tn-tabs__bar {
				
				bottom:-1rpx;
			}
		}
		.content{
			padding-top:90rpx;
			
			}
			
		
	}
}
</style>
